import React from "react";
// import { topToBottom } from "../../util/compute";
import './TestTree.css'
interface Node {
    value: number | string;
    left?: Node;
    right?: Node;
}

export function createTree(arr: number[]) {
    function createNode(index: number, treeNode?: RenderTree) {
        const value = arr[index];
        let node: Node = {
            value: value
        };
        if (!treeNode) {
            treeNode = new RenderTree(value);
        }
        if (arr[index * 2 + 1] !== undefined) {
            setTimeout(() => {
                console.log(arr[index * 2 + 1])
                treeNode!.insertLeft(arr[index * 2 + 1]);
                node.left = createNode(index * 2 + 1, treeNode!.left)
            }, 1000)
        }

        if (arr[index * 2 + 2] !== undefined) {
            setTimeout(() => {
                console.log(arr[index * 2 + 2])
                treeNode!.insertRight(arr[index * 2 + 2]);
                node.right = createNode(index * 2 + 2, treeNode!.right)
            }, 1000)
        }
        return node;
    }
    const tree = new RenderTree(arr[0]);
    const treeNode = createNode(0, tree);
    return {
        tree,
        treeNode
    }
}

export class RenderTree {
    node: HTMLElement;

    value: number;

    right!: RenderTree;

    left!: RenderTree;

    constructor(value: number) {
        this.node = document.createElement('div');
        this.value = value;
        this.node.className = "node-container"
        this.node.innerHTML = `
            <div class="text-content">
                <span class="text">${value}</span>
            </div>
            <div class="child-content">
                <div class='left-${value}'></div>
                <div class='right-${value}'></div>
            </div>
        `

    }

    insertRight(value: number) {
        const tag = this.node.getElementsByClassName(`right-${this.value.toString()}`)[0];
        const right = new RenderTree(value);
        this.right = right;
        tag?.parentElement?.insertBefore(right.node, tag);
    }

    insertLeft(value: number) {
        const tag = this.node.getElementsByClassName(`left-${this.value.toString()}`)[0];
        const left = new RenderTree(value);
        this.left = left;
        tag?.parentElement?.insertBefore(left.node, tag);
    }
}

(window as any).eexport =  function eexport(count: number | number[]) {
    if (typeof count === 'number') {
        for(let i = 1, len = count; i <= len; i++) {
            typeof count === 'number' && (count = []);
            count.push(i);
        }
    }
    const result = createTree(count as number[]);

        const content = document.getElementById('root-tree-content')

        // @ts-ignore
        content?.parentElement.insertBefore(result.tree.node, content);
    return result;
}

// @ts-ignore
window.topToBottom = function (tree: Node) {
    function print(current: Node[], child?: Node[]) {
        current.forEach(node => console.log(node.value));
        if (!child) {
            child = current.flatMap(node => [node.left, node.right]).filter(Boolean) as Node[];
        }
        if (!child || !child.length) {
            return;
        }
        let grandChild: Node[] = child.flatMap(node => [node.left, node.right]).filter(Boolean) as Node[];
        print(child, grandChild);
    }
    print([tree]);
};

export default class TestTree extends React.Component {
    componentDidMount() {

        
    }
    render() {

        return <>{
            <div id="root-tree-content"></div>
        }</>
    }
}
